<template>
  <div>
    <div ref="el" id="pie" style="width:25vw; height:30vh;color: aliceblue;"></div>
  </div>
</template>

<script setup>

import { ref, onMounted, onBeforeUnmount, reactive ,getCurrentInstance} from 'vue'
import * as echarts from 'echarts'
import { useResizeObserver } from '@vueuse/core'
import { getSecurityData } from '~/api/screen'

const { proxy } = getCurrentInstance();
let myChart = null

onMounted(() => {
  let chartDom = document.getElementById('pie')
  if (chartDom) {
    myChart = echarts.init(chartDom)
    getData()
  }
})

onBeforeUnmount(() => {
  if (myChart) echarts.dispose(myChart)
})

function getData() {
  // myChart.showLoading()
  let jsonData = []
  getSecurityData().then(res => {
    // console.log('lefttop',res)
    jsonData = res.data
    // console.log(jsonData);
  // .finally(() => {
  //   myChart.hideLoading()
  // })
  let option = {
    title: {
      text: proxy.$t('威胁等级占比'),
      textStyle: {
      fontWeight: 'lighter', // 设置标题字体粗细为细体
        color: '#fff',
      },
      subtext: proxy.$t('比例'),
      left: 'center',
      subtextStyle: {
      color: '#f3f1f0' 
    },
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      // data: Object.keys(jsonData),
      left: 'left',
      textStyle: {
      color: '#f3f1f0' // 设置标题字体颜色为红色
    }
    },
    series: [
      {
        // name: '攻击类型',
        type: 'pie',
        radius: '50%',
        data: jsonData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
        textStyle: {
          color: '#fff' // 设置标签字体颜色为红色
        }
      }
      }
    ]
  }
  myChart.setOption(option)
})
}

// vueuse 里面的 useResizeObserve   在使用myChart.resize() 重新自己设定大小
const el = ref(null)
useResizeObserver(el, entries => myChart.resize())
</script>

<style scoped>
canvas {
  aspect-ratio: auto 200 / 100;
}
</style>